<template>
  <div
    class="title-bar"
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 35px;
      margin-top: 35px;
    "
  >
    <img src="../assets/vue.svg" width="48" />
    <div class="title">ELEME_ADMIN</div>
  </div>
  <a-form
    style="max-width: 480px; margin: 0 auto"
    label-align="left"
    auto-label-width
    :model="form"
    @submit="handleSubmit"
  >
    <a-form-item field="userAccount" label="账号">
      <a-input v-model="form.userPhone" placeholder="请输入账号" />
    </a-form-item>
    <a-form-item field="userPassword" tooltip="密码不少于 8 位" label="密码">
      <a-input-password v-model="form.password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" style="width: 120px"
        >登录
      </a-button>
        <div style="width: 100px"></div>
        <a-button type="primary" @click="router.push({path:'/user/register'})" style="width: 120px"
        >注册
        </a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { reactive } from "vue";


import {UserLoginRequest} from "../type/user";
import {login} from "../service/user.ts";
import {userStore} from "../store/user.ts";
import router from "../router";


const store = userStore();
const form = reactive({
  userAccount: "",
  userPassword: "",
} as UserLoginRequest);

//登录逻辑
const handleSubmit = async () => {
    //执行登录
   const res = await login(form);
  if (res.code === 0) {
      //获取登录用户
    await  store.updateLoginUser();
    await router.push({
        path: "/index",
    });
  } else {
    alert(res.message);
  }
};
</script>

<style scoped></style>
